<template>
    <a-modal class="fillmaskModal" title="新建任务内容" :width="1500" :visible="visible" :confirmLoading="confirmLoading"
        @ok="handleOk" @cancel="handleCancel" cancelText="取消" wrapClassName="ant-modal-cust-warp"
        style="top:5%;height: 90%;overflow-y: hidden">
        <!-- 表格 -->
        <div>
            <a-form :form="form" style="max-width: 50%;  margin: 30px auto 0;">
                <!-- 请输入任务名称 -->
                <a-form-model-item label="模板名称" prop="请输入模板名称">
                    <a-input v-decorator="[
                        'taskName',
                        { rules: [{ required: true, message: '请输入模板名称' }] },
                    ]" placeholder="请输入模板名称" />
                </a-form-model-item>

                <!-- 填报标准 -->
                <a-form-model-item label="请选择填报标准">
                    <a-select default-value="标准一">
                        <a-select-option value="标准一">GRI</a-select-option>
                        <a-select-option value="标准二">TCTD</a-select-option>
                        <a-select-option value="自定义">ISSB</a-select-option>
                    </a-select>
                </a-form-model-item>

            </a-form>
            <!-- 卡片 -->
            <!-- 

                checkable  添加复选框
                tree-data  数据
                default-expanded-keys  默认展开指定的树节点
                default-selected-keys  默认选中的树节点
                default-checked-keys   默认选中复选框的树节点

                事件
                select  点击树节点触发
                check   点击复选框触发
             -->
            <div class="boxCard">
                <a-card style="width:30%;height:100%;float:left;">
                    <div class="boxCardLeft">
                        <div class="titleCard">公司名称</div>
                        <!-- tree 树形结构 -->
                        <a-tree checkable :tree-data="treeDataFirm" :default-expanded-keys="['0-1-0', '0-1-1']"
                            :default-selected-keys="['0-1-0', '0-1-1']" :default-checked-keys="['0-1-0', '0-1-1']"
                            @select="onSelectFirm" @check="onCheckFirm">
                        </a-tree>
                    </div>
                </a-card>
                <a-card style="width:30%;height:100%;float:left;">
                    <div class="boxCardRight">
                        <div class="titleCard">公司指标</div>
                        <!-- tree 树形结构 -->
                        <a-tree checkable :tree-data="treeDataIndex" :default-expanded-keys="['0-0-0', '0-0-1']"
                            :default-selected-keys="['0-0-0', '0-0-1']" :default-checked-keys="['0-0-0', '0-0-1']"
                            @select="onSelectIndex" @check="onCheckIndex">
                        </a-tree>
                    </div>
                </a-card>
            </div>
        </div>
    </a-modal>
</template>
  
<script>
import axios from 'axios'


export default {
    name: '',
    data() {
        return {
            title: '',
            visible: false,
            roleDisabled: false,
            confirmLoading: false,
            form: this.$form.createForm(this),  // 手机表单中的数据
            model2: [],
            treeDataIndex: [],
            treeDataFirm: []
        }
    },
    components: {
    },

    mounted() {
        // 获取指标的数据
        this.PointerRequestIndex()
        this.pointerRequestFirm()
    },

    methods: {
        // 获取指标的数据
        async PointerRequestIndex() {
            const result = await axios.get('/mock/tableTemplateIndex')
            this.treeDataIndex = result.data.data
            console.log(result, '指标模拟数据------------------')
        },

        async pointerRequestFirm() {
            const result = await axios.get('/mock/tableTemplateFirm')
            this.treeDataFirm = result.data.data
            console.log(result, '部门模拟数据------------------')
        },

        // 父组件调用方法
        add() {
            this.visible = true
        },



        // edit(record) {
        //     this.model = Object.assign({}, record)
        //     this.visible = true
        //     编辑页面禁止修改角色编码
        //     if (this.model.id) {
        //         this.roleDisabled = true
        //     } else {
        //         this.roleDisabled = false
        //     }
        // },


        // close() {
        //     this.$refs.form.clearValidate()
        //     this.$emit('close')
        //     this.visible = false
        // },

        handleOk(e) {
            // this.ModalText = 'The modal will be closed after two seconds';
            this.confirmLoading = true;
            setTimeout(() => {
                this.visible = false;
                this.confirmLoading = false;
            }, 2000);
        },

        handleCancel() {
            this.visible = false;
        },

        onRangeChange() { },
        handlePanelChange2() { },

        // 公司树节点
        onSelectFirm(selectedKeys, info) {
            console.log('selected', selectedKeys, info);
        },

        // 指标树节点
        onSelectIndex(selectedKeys, info) {
            console.log('selected', selectedKeys, info);
        },


        // 公司复选框
        onCheckFirm(checkedKeys, info) {
            console.log('onCheck', checkedKeys, info);
        },

        // 指标复选框
        onCheckIndex(checkedKeys, info) {
            console.log('onCheck', checkedKeys, info);
        },
    }
}
</script>
  
<style lang="scss" >
@import '@/assets/css/newrModule.scss';

.cardTable {
    // width: 100%;
    // display: flex;
    // justify-content: space-around;
    // overflow: auto;
}

.boxCard {
    display: flex;
    justify-content: center;


    .boxCardLeft {
        // width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .titleCard {
            // margin: 0 auto;
            margin: 20px;
            font-size: 18px;
            font-weight: bold;
        }
    }

    .boxCardRight {
        // width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .titleCard {
            // margin: 0 auto;
            margin: 20px;
            font-size: 18px;
            font-weight: bold;
        }
    }

    // .title div {
    //     margin: 0 auto;
    // }
}



.fillmaskModal .ant-modal-body {
    padding-top: 0px !important;
    padding-left: 0;
    padding-right: 0;
}

.fillmaskModal .ant-spin-nested-loading {
    padding: 12px 24px !important;
}

.fillmaskModal .ant-select-selection-selected-value {
    font-size: 14px;
}
</style>